import React, { memo } from 'react';
import { List } from './style.js';
import Lazyload from 'react-lazyload'
import {useHistory} from 'react-router-dom' 
const loading = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.lumene.com%2Fsites%2Fall%2Fthemes%2Flumene2016%2Fimages%2Floading.gif&refer=http%3A%2F%2Fwww.lumene.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645284187&t=c293e9a8b1e54bbc785e1e6ad5cd4a91';   

const ListItem = (props) => {
    const history = useHistory()
    const {item} = props
    const goto_btn = (id) =>{
        history.push(`/detail/${id}`)
    }
    return (
        <>
            <List key={item.id} onClick={() => goto_btn(item.id)}>
                <Lazyload
                    height={100}
                    placeholder={
                    <img width="100%" height="100%"
                    src={loading} />
                    }>
                      <img src={item.imgsrc} alt="" />
                </Lazyload>
                <div className="list_title">{item.title}</div>
                <div className="list_price">到手价&nbsp;{item.price}</div>
            </List>
        </>
    )
}

export default ListItem
